/*
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-08-15 15:16:10
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-22 11:24:06
 * @FilePath: \四阶段项目\src\components\workorder\DisposeWorkorder.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React,{useState,useEffect} from 'react'
import {inject,observer} from 'mobx-react'

import { Checkbox } from 'antd';
import { toJS } from 'mobx';
import '../../assets/css/workordercss/DisposeWorkorder.css'
 function DisposeWorkorder(props) {
  const [data,setData]=useState({})

  useEffect(() => {
    const data=toJS(props.workOrderStore.CheckWorkOrderList)
    setData(data)
    
  }, [props.workOrderStore.CheckWorkOrderList]);

  const onChange = (checkedValues,props) => {
    console.log('checked = ', checkedValues);
  };
  function dome(e){
    console.log(e.target.value,e.target.dataset.key);
   //  const obj ={...data}
   //  obj[e.target.dataset.key]=e.target.value
   //  setData(obj)
 }

  const options = [
    { label: '未处理', value: '未处理' },
    { label: '处理中', value: '处理中' },
    { label: '已完成', value: '已完成' },
  ];
  return (
    <div  id="mod">
    <div>工单处理</div>
    <h3>工单处理结果</h3>
    <ul>
    <li style={{ display: "flex" }}>
    <span>客户名称</span>
    <span>
      <input type="text" value={data.customer_name}  onChange={(e)=>dome(e)} key={data.customer_name} data-key='customer_name'/>
    </span>
  </li>{" "}
  <li style={{ display: "flex" }}>
  <span>关联信息</span>
    <button>基本资料</button>
    <button>跟单</button>
    <button>订单</button>
    <button>合同</button>
    <button>售后</button>
    <button>收支</button>
</li>{" "}
<li style={{ display: "flex" }}>
<span>客户联系人</span>
<span>
  <input type="text" value={data.contact_name} onChange={(e)=>dome(e)} key={data.contact_name} data-key='contact_name'/>
</span>
</li>{" "}
<li style={{ display: "flex" }}>
<span>工单类型</span>
<span>
  <input type="text" value={data.work_order_type} onChange={(e)=>dome(e)} key={data.work_order_type} data-key='work_order_type'/>
</span>
</li>{" "}
<li style={{ display: "flex" }}>
<span>指派人员</span>
<span>
  <input type="text" value={data.assigned_personnel} onChange={(e)=>dome(e)} key={data.assigned_personnel} data-key='assigned_personnel'/>
</span>
</li>
<li style={{ display: "flex" }}>
<span>起始时间</span>
<span>
  <input type="text" value={data.start_time} onChange={(e)=>dome(e)} key={data.start_time} data-key='start_time'/>
</span>
</li>
<li style={{ display: "flex" }}>
<span>结束时间</span>
<span>
  <input type="text" value={data.end_time} onChange={(e)=>dome(e)} key={data.end_time} data-key='end_time'/>
</span>
</li>
<li style={{ display: "flex" }}>
<span>交通方式</span>
<span>
  <input type="text" value={data.traffic_mode} onChange={(e)=>dome(e)} key={data.traffic_mode} data-key='traffic_mode'/>
</span>
</li>
<li style={{ display: "flex" }}>
<span>差旅联系人</span>
<span>
<input type="text" value={data.travel_contact} onChange={(e)=>dome(e)} key={data.travel_contact} data-key='travel_contact'/>
</span>
</li>
<li style={{ display: "flex" }}>
<span>工作描述</span>
<span>
<input type="text" value={data.job_describe} onChange={(e)=>dome(e)} key={data.job_describe} data-key='job_describe'/>
</span>
</li>
<li style={{ display: "flex" }}>
<span>工作记录</span>

<button>工作记录</button>

</li>
<li style={{ display: "flex" }}>
<span>处理状态</span>
<span className='xuanzhe'>
<Checkbox.Group options={options} defaultValue={['']} onChange={onChange} />
</span>
</li>
<li style={{ display: "flex" }}>
<span>发起人</span>
<span>
<input type="text" disabled={false} value={data.user_name} onChange={(e)=>dome(e)} key={data.user_name} data-key='user_name'/>
</span>
</li>
      </ul>
    
    </div>
  )
}

export default inject('workOrderStore')(observer(DisposeWorkorder))
